<template>
    <div>
      <!-- 给角色分配权限 -->
      <el-dialog title="权限页面" :visible.sync="dialogFormVisible3">
<el-form label-width="80px">
        <el-form-item label="角色列表">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="rolequanxianIds" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="r in allPermissions" :key="r.id" :label="r.id">{{r.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible3 = false">取 消</el-button>
    <el-button type="primary" @click="fenpei()">确 定</el-button>
  </div>
</el-dialog>

      <!-- 修改 -->
      <el-dialog title="修改页面" :visible.sync="dialogFormVisible1">
  <el-form :model="pojo1">
    <el-form-item label="角色名称" :label-width="formLabelWidth">
      <el-input v-model="pojo1.name" autocomplete="off"></el-input>
    </el-form-item>
    
  <el-form-item label="描述">
    <el-input type="textarea" v-model="pojo1.ms"></el-input>
  </el-form-item>

  <el-form-item label="创建时间">
      <el-date-picker type="date" value-format="yyyy-MM-dd " placeholder="选择日期" v-model="pojo1.createtime" style="width: 100%;"></el-date-picker>
  </el-form-item>

  

  <el-form-item label="创建人" :label-width="formLabelWidth">
      <el-input v-model="pojo1.userId" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>

  
  
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="update()">确 定</el-button>

  </div>


</el-dialog>
        <!-- 添加 -->
        <el-dialog title="添加页面" :visible.sync="dialogFormVisible">
  <el-form :model="pojo">
    <el-form-item label="角色名称" :label-width="formLabelWidth">
      <el-input v-model="pojo.name" autocomplete="off"></el-input>
    </el-form-item>
    
  <el-form-item label="描述">
    <el-input type="textarea" v-model="pojo.ms"></el-input>
  </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="add()">确 定</el-button>
  </div>
</el-dialog>

        <!-- 展示 -->
        <div><el-button @click="toadd()" style="color: cornflowerblue;">添加</el-button></div> 
        <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column    prop="id" label="编号"></el-table-column>
    <el-table-column prop="name" label="角色"></el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      
      <template slot-scope="scope">
        <el-button @click="tofenpei(scope.row.id)" type="text"   size="small" >分配权限</el-button>
        <el-button @click="del(scope.row.id)" type="text"   size="small" >删除</el-button>
        <el-button type="text" size="small" @click="toupdate(scope.row)"  >编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
</template>

    <script>
    import axios from 'axios';
        export default {
            data() {
                return {
                    tableData:[],
                    dialogFormVisible:false,
                    pojo:{},
                    pojo1:{},
                    dialogFormVisible1:false,
                    dialogFormVisible2:false,
                    allPermissions:[],//权限列表
                    dialogFormVisible3:false,
                    checkAll: false,//默认全选框是false
                    isIndeterminate: true,//isIndeterminate 为真时，复选框将显示为半选状态，而不是完全选中或未选中。
                    rolequanxianIds:[],//权限列表id
                    id:''
                }
            },
            methods:{
              fenpei(){
                axios.post(`http://localhost:8088/role/fenpei?roleId=${this.pojo.id}&permissionIds=${this.rolequanxianIds}`).then(res=>{
                  if(res.data>=0){
                   this.$message.success('分配权限成功')
                   this.dialogFormVisible3 = false;
                  } 
              })  
              },
              handleCheckAllChange(val) {
        this.rolequanxianIds = val ? this.allPermissions : [1,2,3,4,5,6,7,8]; //1、2、3、4、5、6、7、8这里是写死了，正常是循环allPermissions拿到里面的id
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.allPermissions.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.allPermissions.length;
      },
        findPermissions(){
            axios.get(`http://localhost:8088/role/findPermissions`).then(res=>{
                this.allPermissions=res.data;
            })
      },
              tofenpei(id){
                this.pojo.id=id
                  this.dialogFormVisible3=true
                  axios.get(`http://localhost:8088/role/findPermissionsByRoleId?id=${id}`).then(res=>{
                  this.rolequanxianIds=res.data;
                  this.findPermissions();
              })
              },
              update(){
                  axios.post(`http://localhost:8088/role/update`,this.pojo1).then(res=>{
                  if(res.data>=0){
                   this.$message.success('修改成功')
                   this.dialogFormVisible1 = false;
                   this.findAll();
                  } 
              })  
              },
              del(id){
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                         axios.get(`http://localhost:8088/role/del?id=${id}`).then(res=>{
                        if(res.data>=0){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            this.findAll();
                        }
                            })
                        }).catch(() => {
                      this.$message({
                          type: 'info',
                          message: '已取消删除'
                      });  
                    })  
                }, 
                
                toupdate(row){
                  this.dialogFormVisible1=true
                  this.pojo1=row   
              },
              
              add(){
                axios.post(`http://localhost:8088/role/add`,this.pojo).then(res=>{
                  if(res.data>=0){
                   this.$message.success('添加成功')
                   this.dialogFormVisible = false;
                   this.findAll();
                  } 
              })
              }, 
                toadd(){
                  this.dialogFormVisible=true
                  this.pojo={}
                    
                },
                findAll(){
            axios.post(`http://localhost:8088/role/findAll`).then(res=>{
                this.tableData = res.data;
            })
        }
            },
            created() {
              this.findAll();  
              this.findPermissions();
            }
        }
</script>

<style scoped>

</style>